<!DOCTYPE html>
<html>
<head>
    <#import "../common/common.macro.ftl" as netCommon>
    <title>${title!"艺术上海"}</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="${keywords?if_exists}" />
    <meta name="description" content="${description?if_exists}" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="/static/css/bootstrap.mini.css" rel="stylesheet" />
    <link href="/static/css/style.css" rel="stylesheet" />
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/font-face.css" rel="stylesheet" />
    <link href="/static/css/common/index.css" rel="stylesheet" />
    <link href="/static/css/footer/index.css" rel="stylesheet" />
    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/js/owl/owl.carousel.css" rel="stylesheet" />
    <link href="/static/js/owl/owl.theme.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="/static/img/icon.png"/>
    <style>
        .side{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding:0;
            background: white;

            border-bottom: #eee solid 1px;
            z-index: 10;

        }
        .sticky{
            box-shadow: 0 5px 20px rgba(0,0,0,.1);
        }

        .search-for{
            width: 50%;
            display: flex;

        }
        .search-for input{
            background: #ffffff;
            border: none;
            width: 100%;
            padding: 0 1rem;
            font-size: 1.2rem;
        }

        .go-search{
            width: 4rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            border-left: #eee solid 1px;
            border-right: #eee solid 1px;
            cursor: pointer;
        }
        .go-search:hover{
            color: var(--yellow);
        }
        .cat{
            border-bottom: #eee solid 1px;
        }
        .cat ul{
            display: flex;
            justify-content: center;

        }
        .cat ul li{
            padding: var(--bigger) 1rem;
        }

        .sort{
            display: flex;
            align-items: center;
        }
        .sort>div>div:first-child {
            display: none;
        }
        .sort h3{
            font-size: 1rem;
            padding: 0 2rem;
        }
        .sort>div{

            border-left: #eee solid 1px;
            align-items: center;
            display: flex;

        }
        .by>div{
            align-items: center;
            display: flex;
            cursor: pointer;
            height: 4rem;
            padding:0 2rem;
        }
        .xline{
            width: 3rem;
            height: 4px;
            background: #e05c46;
            margin: 0 1rem;
        }


        .grid{
            width: 100%;
        }
        .grid-warp{
            display: flex;
            flex-wrap: wrap;
            background: var(--bcolor);
            padding:calc(var(--bigger) / 2);
        }

        .grid-box{
            padding:14px;
            width: 33.33333%;
        }
        .grid-box.on.off{
            opacity: 1;
        }
        .grid-box.off{
            opacity: 0.3;
        }
        .grid-box.active{
            opacity: 1 !important;
        }

        .grid-box a{
            display: block;
            position: relative;
        }
        .grid-box .y{
            border-radius: .5rem;
            overflow: hidden;
            background: white;
            box-shadow: 10px 10px 10px rgba(0,0,0,.1);
        }
        .grid-box.active .y{
            box-shadow:10px 10px 10px var(--yellow);
        }

        .grid-box img{
            width:100%;
            height:260px;
            object-fit: cover;
        }

        .grid-box a h2{
            font-size: 1rem;
            padding: 1rem;
            padding-top: 14px;
            padding-bottom: 14px;
        }
        .grid-box a .text{
            padding:0 1rem 1rem 1rem;
        }
        .gb h2{
            padding-top: 14px;
            padding-bottom: 14px;
        }

        .gb h2 span{
            display: block;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
        }

        .grid-box .nub{
            position: absolute;
            width: 4rem;
            height: 4rem;
            top:0;
            right: 0;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translate(50%,-50%);
            box-shadow: 5px 5px 20px rgba(0,0,0,.2);
            font-size: 12px;
            font-weight: 700;
        }
        .grid-box a h2{
            margin: 10px 0px;
        }
        .grid-box.active .nub{
            box-shadow: 5px 5px 20px var(--yellow);
            color: var(--yellow);
        }

        #owl-demo a{

        }
        #owl-demo a.item{
            width: 100%;
            height: 470px;
            display: block;
            background-position: center center;
            background-size: cover;
        }


        .paging {
            width: 100%;
            max-width: 1200px;
            margin: 50px auto;
            font-size: 0
        }

        .paging a span {
            display: inline-block;
            width: 81px;
            background-color: #fff;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            cursor: pointer
        }

        .paging a span:hover {
            background-color: #ccc
        }

        .paging a span+span {
            margin-left: 1px
        }

        .paging a span.current {
            background-color: #eee;
            color: #333
        }

        .paging b {
            display: inline-block;
            width: 86px;
            text-align: center;
            font-size: 15px
        }

        .paging>a.nextPage {
            text-decoration: none;
            color: #333;
            background-color: #fff;
            text-align: center;
            line-height: 50px;
            width: 580px;
            font-size: 20px;
            display: inline-block;
            float: right;
            margin-right: 20px
        }
    </style>
</head>
<body>
<!-- header -->
<@netCommon.commonHeader "艺术机构" menu i18n/>

<div id="owl-demo" class="owl-carousel" style="margin-top: 120px">
    <#list exCompanyBanner as items>
        <a class="item" href="${items.url}" target="_blank" style="background-image:url(${items.image})"></a>
    </#list>
</div>

<div class="" style="  background: #fff;">
<div class="side" style="position: static; margin:0px auto; padding: 50px; width: 1440px;">
    <div class="grid">
    <div class="grid-warp exhibition-grid-warp">
        <#list data.data.records as entity>
        <article id="post-1078" class="grid-box gb">
            <a href="/exhibition/company?companyNo=${entity.companyNo!''}" target="_blank">
                <div class="y">
                    <div class="grid-box-img">
                        <img width="1280" height="642" src="${entity.logo!''}" class="attachment-box size-box wp-post-image" alt="" title=""></div>
                        <h2><span class="is-cn" data-cn="">${entity.name}</span></h2>
                </div>
            </a>
        </article>
        </#list>
        </div>
             <p class="paging" >
                 <#if (data.data.pages > 3)>
<#--                     <#list 1..3 as item>-->
<#--                         <a href="/exhibition/exhibition?page=${item}"> <span class="<#if item == data.data.current>current</#if>"> ${item}</span></a>-->
<#--                     </#list>-->
                     <#if (data.data.pages > 5)>
                         <#if (data.data.current <= 3) >
                             <#list 1..5 as item>
                                 <a href="<@netCommon.exQueryUrl queryItem=params addQueryItem=[['page',item ]]  removeQueryItem=['page']/>"> <span class="<#if item == data.data.current>current</#if>"> ${item}</span></a>
                             </#list>
                         <#elseif (data.data.current >= data.data.pages-2)>
                             <#list (data.data.pages-4)..data.data.pages as item>
                                 <a href="<@netCommon.exQueryUrl queryItem=params addQueryItem=[['page',item ]]  removeQueryItem=['page']/>"> <span class="<#if item == data.data.current>current</#if>"> ${item}</span></a>
                             </#list>
                         <#else>
                             <#list (data.data.current-2)..(data.data.current+2) as item>
                                 <a href="<@netCommon.exQueryUrl queryItem=params addQueryItem=[['page',item ]]  removeQueryItem=['page']/>"> <span class="<#if item == data.data.current>current</#if>"> ${item}</span></a>
                             </#list>
                         </#if>
                     <#else>
                         <#list 1..data.data.pages as item>
                             <a href="<@netCommon.exQueryUrl queryItem=params addQueryItem=[['page',item ]]  removeQueryItem=['page']/>"> <span class="<#if item == data.data.current>current</#if>"> ${item}</span></a>
                         </#list>
                     </#if>

                     <#if (data.data.current <data.data.pages)>
                         <a href="<@netCommon.exQueryUrl queryItem=params addQueryItem=[['page',data.data.current+1 ]]  removeQueryItem=['page']/>" class="nextPage">下一页</a>
                     </#if>
                 </#if>
<#--                 <#if (data.data.current <data.data.pages)>-->
<#--                     <a href="/exhibition/exhibition?page=${data.data.current+1}" class="nextPage">下一页</a>-->
<#--                 </#if>-->
               </p>
        </div>
    </div>
</div>
<!-- footer -->
<@netCommon.commonFooter footer friendLink copyright i18n/>

<!-- script -->
<@netCommon.commonScript />
<script type="text/javascript" src="/static/js/owl/owl.carousel.js"></script>

<script>
    $(function () {
        $('#owl-demo').owlCarousel({
            items: 1
        });
    })
</script>
</body>
</html>
